﻿
<title>LAMDBA'S PAGE</title>

<div style="position:fixed; left:15; top:30%">
    <div style="height:50; width:50; background-color:white;" onclick="topage1()"></div>
    <div style="height:50; width:50; background-color:#B2E5FF" onclick="topage2()"></div>
    <div style="height:50; width:50; background-color:#FFC0CB" onclick="topage3()"></div>
</div>

<div id="page1" style="width:1000; margin:auto">

    <div style="width:1000; height:200">
        <img src="seeright.png" style="width:200; height:200; float:left">
        <div style="width:800; height:200; float:right">
            <div style="height:100">
            </div>
            <div style="text-align:center">
                I'm Lamdba. This is my personal page.<br>
                What do you think about AI?
            </div>
        </div>
    </div>

    <div style="width:700; height:100; margin:20 auto; padding:20; background-color:lightgray">
        1.我想吃东西，然后发现厨房有小龙虾（虾属于食物）；然后，我想到我对海鲜过敏，所以我不能吃虾（虾属于海鲜）——赤臂生
    </div>

    <div style="width:700; height:100; margin:20 auto; padding:20; background-color:lightgray">
        2.直走，到转角时向右转弯，转到正对直路方向时继续直走，当楼梯到达眼前时下楼梯，下到底后右转，看到站台后直走，进入地铁并停下——超联、我
    </div>

    <div style="width:700; height:100; margin:20 auto; padding:20; background-color:lightgray">
        3.听说某人在教室里，又听说然后他走进教室，为什么会感到奇怪？——小吧、陆晓
    </div>

    <div style="width:700; height:100; margin:20 auto; padding:20; background-color:lightgray">
        4.计算13*7，先3*7得21，再1*7得7，加到21的2上，得9，跟上21的1最终得到91——我；<br>
        根据某种形式的记忆指示，把物件a放进了盒子，把物件b扔进了垃圾桶——多莲、小吧
    </div>

    <div style="width:700; height:100; margin:20 auto; padding:20; background-color:lightgray">
        5.有一次我伸手从口袋里拿手机，发现没有；有一次我刚刚伸手，想起来手机不在口袋就停下了；有一次想到手机不在口袋就没有想动。

    </div>

</div>



<div id="page2" style="display:none; background-color:#B2E5FF">
    <div id="board1" style="width:1000; margin:auto">       <!-- 请注意，如果标签过少，不能保证底部的图片依旧位于底部 -->
        <div style="height:50 "></div>



    </div>
    <div style="height:200"></div>
    <div style="height:100; background-color:#CCFFFF">
        <div style="width:1000; margin:auto">
            <img src="seeright2.png" style="width:100; height:100; position:relative; left:200; bottom:50">
            <img src="bubble.png" style="width:100; height:100; position:relative; left:500; bottom:100">
        </div>
    </div>

</div>

<div id="page3" style="display:none">
    <div style="background-color:#FFC0CB; width:100%; height:100%; position:fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index:-2"></div>
    <img src="big.png" style="width:800; height:800; opacity:0.1; position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index:-1">
    <div id="board2" style="width:1000; height:2000; margin:auto">

    </div>
</div>


<!--    可以在attr设定class
<style type="text/css">
    .democlass{
        color:red;
    }
</style>
-->

<script>
    const topage1 = () => {
        document.getElementById("page1").style.display="block";
        document.getElementById("page2").style.display="none";
        document.getElementById("page3").style.display="none";
        document.title = "LAMDBA'S PAGE";
    };
    const topage2 = () => {
        document.getElementById("page1").style.display="none";
        document.getElementById("page2").style.display="block";
        document.getElementById("page3").style.display="none";
        document.title = '具象之海';
    };
    const topage3 = () => {
        document.getElementById("page1").style.display="none";
        document.getElementById("page2").style.display="none";
        document.getElementById("page3").style.display="block";
        document.title = '抽象之海';
    };
    //~ topage3();
    window.onload = function () {

    var url = "context.json";    /*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
    var request = new XMLHttpRequest();
    request.open("get", url);/*设置请求方法与路径*/
    request.send(null);/*不发送数据到服务器*/
    request.onload = function () {      /*XHR对象获取到返回信息后执行*/
        if (request.status == 200) {        /*返回状态为200，即为数据获取成功*/
            var data = JSON.parse(request.responseText);
            console.log(data)
            var list1 = data[0];
            var list2 = data[1];
            var board1 = document.getElementById("board1");

            for(var i = 0; i < list1.length; i++){
                var divnode = document.createElement("div");
                var textnode = document.createTextNode(list1[i]);
                var att1 = document.createAttribute("style");
                att1.value = "width:700; height:100; margin:20 auto; padding:20; background-color:lightgray; opacity:0.9";
                divnode.setAttributeNode(att1);
                divnode.appendChild(textnode);
                board1.appendChild(divnode);
            }
            var board2 = document.getElementById("board2");

            for(var i = 0; i < list2.length; i++){
                var divnode = document.createElement("div");
                var textnode = document.createTextNode(list2[i]);
                var att2 = document.createAttribute("style");
            att2.value = "width:700; height:100; margin:20 auto; padding:20; background-color:lightgray; opacity:0.9";
                divnode.setAttributeNode(att2);
                divnode.appendChild(textnode);
                board2.appendChild(divnode);
            }
        }
    }
}




</script>
